<template>
  <div class="region-rank-content">
    <van-tabs animated v-model:active="activeKey" class="sub-tab" swipeable>
      <van-tab title="区域排名">
        <RegionRankItem :data="props.data"></RegionRankItem>
      </van-tab>
      <van-tab title="领域排名">
        <RegionRankItem :data="props.data" class="rank2"></RegionRankItem>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import RegionRankItem from "./RegionRankItem.vue"
import { computed, ref, reactive, toRefs, watch, nextTick, onMounted } from 'vue'
import { useEventStore } from '@/store'
import { storeToRefs } from 'pinia'
import { number } from "echarts"

const eventStore = useEventStore()
const { rankType } = storeToRefs(eventStore)

defineOptions({
  name: 'RegionRank'
})

const props = defineProps({
  data: {
    type: Array,
    default: []
  }
})

const emit = defineEmits(['rankTabChange'])

const activeKey = ref(0);
activeKey.value = rankType.value?rankType.value:activeKey.value
const handleChangeTab = (val: number) => {
  activeKey.value = val
  emit('rankTabChange', activeKey.value)
}

watch(activeKey, (val) => {
  handleChangeTab(val)
})
</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.region-rank-content{
  height: 335px;
  background: #fff;
  color: #212121;
  border-radius: 5px;
  box-shadow: 0px 2px 10px 0px #0000000C;
  padding: 15px 13px 10px;
  margin: 9px 10px 0;
  font-size: 14px;
}
</style>

